<template>
    <div class="login">
      <div class="login_box">
          <div class="login_box_left">
              <section style="margin-top: 15%;">
                  <div class="title" v-if="loginType=='登录'">欢迎您登录</div>
                  <div class="company" v-else>{{ company }}</div>
              </section>

                            
              <section v-if="loginType=='注册'">
                  <div class="input_container">
                    <input type="text" v-model="form.username" placeholder="请输入昵称">
                  </div>
              </section>

              <section>
                  <div class="input_container">
                      <input type="text" v-model="form.user" placeholder="请输入账号">
                  </div>
              </section>
              
              <section>
                  <div class="input_container">
                      <input v-model="form.password" type="password" placeholder="请输入密码">
                  </div>
              </section>
              <section @click="submit()">
                  <button>{{ loginType }}</button>
              </section>
              <section  v-if="loginType=='登录'">
                  <div class="other" @click="toRegitser()">还没有账号？<span></span></div>
              </section>
              <section  v-else>
                  <div class="backLogin" @click="backLogin()">返回登录</div>
              </section>
          </div>
          <div class="login_box_right">
              <img src="https://esc.simcms.net/templates/default/index/orange/static/img/login.png" alt="">
          </div>
      </div>
      <messageComp ref="ref_messageComp"></messageComp>
    </div>
  </template>
  
  <script setup>
  import axios from "axios"
  import { ref,onMounted } from "vue"
  import { useStore } from "vuex";
  import { useRouter,useRoute } from "vue-router";
  import messageComp from "../components/messageComp.vue";
  const ref_messageComp = ref(null) //弹窗message组件refs
  const store = useStore()
  const router = useRouter()
  const route = useRoute()
      //数据
      let loginType = ref('登录')
      let company = ref('注册方式')
      let form = ref({}) //表单数据
  
      const toRegitser = ()=>{
          loginType.value = '注册'
      }
      const backLogin = ()=>{
          loginType.value = '登录'
      }
      // 登录或者注册
      const submit = ()=>{
        ref_messageComp.value.loading({dom:'.login_box_right',text:'数据获取中...'},1000,()=>{

            if (form.value.user == undefined || form.value.password == undefined ) {

                ref_messageComp.value.messageFail('参数缺失！')

            }else{
                
                if (loginType.value == '登录') {
                    console.log('登录');
                    loginAIP()
                }else{
                    console.log('注册');
                    registerAIP()
                    
                }
                
            }
        })
      
      }
      const toIndex = ()=>{
          router.push({
              path:'/index',
          })
      }
      const toAdmin = ()=>{
          router.push({
              path:'/admin/data',
          })
      }
      const loginAIP = ()=>{
          axios({
              method:'post',
              url:store.state.url + '/users/login',
              data:form.value,
          }).then(res=>{
            // toAdmin
              if (res.data.code == 200) {
                  store.commit("userInfo",res.data.data)
                  ref_messageComp.value.messageSuccess('登录成功')
                  if (res.data.data.type == "普通用户") {
                    toIndex()
                  } else {
                    toAdmin()
                  }
              }else{
                  ref_messageComp.value.messageFail('用户名或者密码错误')
              }
  
          }).catch(err=>{
              console.log(err);
              ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
          })
  
          
      }
      const registerAIP = ()=>{
          axios({
              method:'post',
              url:store.state.url + '/users/register',
              data:form.value,
          }).then(res=>{
            console.log('注册信息：',res);
              if (res.data.code == 200) {
                  store.commit("userInfo",res.data.data)
                  ref_messageComp.value.messageSuccess('注册成功~')
                  toIndex()
              }else{
                  ref_messageComp.value.messageFail('用户已存在！')
              }
          }).catch(err=>{
              ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
          })
  
      }
    //   当dom都生成后
      onMounted(()=>{
        // 监听按下enter键触发提交
        document.onkeydown = function(e){
            if(e.keyCode ==13){
                submit()
            }
        }
        if (route.query.isLogin == 'false') {
            ref_messageComp.value.messageInfo('身份验证失败，禁止访问！')
        }
    })
  </script>
  
  <style scoped>
  .login{
      position: relative;
      top: 260px;
      width: 100%;
      height: 100%;
      user-select: none;
      display: flex;
      justify-content: center;
      place-items: center;
  }
  .login_box{
      position: relative;
      width: 900px;
      height: 400px;
      box-shadow: 0 0 4px #ccc;
      display: flex;
  }
  .login_box>.login_box_left{
      width: 45%;
      height: 100%;
  }
  section{
      margin-top: 10px;
      width: 100%;
      height: 40px;
      line-height: 50px;
      display: flex;
      /* border: 2px solid ; */
  }
  section>.input_container{
      margin-left: 10%;
      width: 80%;
      height: 100%;
      display: flex;
      justify-content: left;
  }
  section>.input_container>input{
      margin-top: 5px;
      width: 100%;
      padding-right: 10px;
      height: 80%;
      border: 2px solid #edecec;
      outline: none;
      border-radius: 5px;
      text-indent: 5px;
  }
  section>.input_container>input::placeholder{
      text-indent: 10px;
  
  }
  section>button{
      margin-left: 10%;
      width: 80%;
      border: none;
      color: gray;
  }
  section>button:hover{
      transition: all 1s;
      background-color: dodgerblue;
      color: white;
  }
  section>.other{
      position: absolute;
      bottom: 7%;
      width: auto;
      height: 40px;
      margin-left: 10px;
      /* border-bottom: 2px solid #ccc; */
      color: gray;
  }
  span{
      margin-top: -10px;
      width: 0%;
      display: block;
      /* border: 2px solid ; */
  }
  section>.other:hover span{
      transition: all 1s;
      width: 100%;
      border-top: 2px solid #ccc;
  }
  .backLogin{
      position: absolute;
      bottom: 7%;
      width: auto;
      height: 40px;
      margin-left: 10px;
      border-bottom: 2px solid lightgreen;
      color: dodgerblue;
  }
  .title{
      width: 100%;
      font-size:1.5em;
      color: dodgerblue;
      height: 100%;
      text-indent: 40px;
      padding-bottom: 10px;
  }
  .company{
      width: 80%;
      font-size: 18px;
      color: gray;
      text-align: left;
      margin-left: 10%;
      height: 100%;
  }
  
  /* 登录右边盒子 */
  .login_box>.login_box_right{
      width: 55%;
      height: 100%;
  }
  .login_box>.login_box_right>img{
      width: 100%;
      height: 100%;
  }
  
  </style>